MagicalCoder.install({
  /*左侧可拖拽的源*/
  dragItems: [
    {
      name: "我的组件",
      icon: "layui-icon layui-icon-face-smile",
      children: [
        {
          name: "工作日历",
          icon: "ri-checkbox-indeterminate-line",
          html: "<mc-calendar></mc-calendar>",
        },
      ]
    }
  ],
  /*自定义组件和属性*/
  components: [
    {
      "identifier": "mc-calendar",
      "properties": {
        "primary": 0,
        "name": "工作日历",
        "treeExtraName": {"attr": [], "text": true},
        "dragInto": false,
        "duplicate": true,
        "duplicateAttr": [],
        "copy": true,
        "paste": false,
        "canDelete": true,
      },
      "attributes": [
        {
          "title": "属性",
          "active": true,
          "content": [
            {
              type: "html",
              category: "配置",
              callback: {
                htmlCallback: function (param) {
                  return `
                  <div class="layui-row layui-col-space3" id="loginApp">
    <template>
      <div class="layui-col-xs12">
        <el-row>
          <el-col :span="24">
            <template >
              <el-button @click="saveStatus" type="primary" size="small" style="margin-bottom: 20px">保存</el-button>
              <el-button @click="clearStatus" type="primary" size="small" style="margin-bottom: 20px">初始化</el-button>
              <el-form v-model="dataManager" label-position="center" size="mini" label-width="60px">
              <el-form-item label="staff api">
                    <el-input filterable allow-create v-model="dataManager.staff_href" placeholder="staff_api"></el-input>
                </el-form-item>
                <el-form-item label="staff参数">
                    <el-row v-if="dataManager.staff_param.length==0">
                        <el-button icon="el-icon-plus" @click="addParam('staff',index)" type="primary" size="small"></el-button>
                        <el-button icon="el-icon-minus" @click="delParam('staff',index)" type="danger" size="small"></el-button>
                    </el-row>
                    <div v-else v-for="(item,index) in dataManager.staff_param" :key="index" style="margin-bottom: 10px">
                    <el-row>
                        <el-input placeholder="参数名" v-model="dataManager.staff_param[index].name"></el-input>
                    </el-row>
                    <el-row>
                    <el-select v-model="dataManager.staff_param[index].type" placeholder="请选择">
                      <el-option
                        v-for="item in poptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    </el-row>
                    <el-row>
                        <el-input placeholder="参数值"  v-model="dataManager.staff_param[index].value"></el-input>
                    </el-row>
                    <el-row>
                        <el-button icon="el-icon-plus" @click="addParam('staff',index)" type="primary" size="small"></el-button>
                        <el-button icon="el-icon-minus" @click="delParam('staff',index)" type="danger" size="small"></el-button>
                    </el-row>
</div>
                </el-form-item>
                <el-form-item label="查询api">
                    <el-input filterable allow-create v-model="dataManager.get_href" placeholder="get_api"></el-input>
                </el-form-item>
                <el-form-item label="查询参数">
                    <el-row v-if="dataManager.get_param.length==0">
                        <el-button icon="el-icon-plus" @click="addParam('get',index)" type="primary" size="small"></el-button>
                        <el-button icon="el-icon-minus" @click="delParam('get',index)" type="danger" size="small"></el-button>
                    </el-row>
                    <div v-else v-for="(item,index) in dataManager.get_param" :key="index" style="margin-bottom: 10px">
                    <el-row>
                        <el-input placeholder="参数名" v-model="dataManager.get_param[index].name"></el-input>
                    </el-row>
                    <el-row>
                    <el-select v-model="dataManager.get_param[index].type" placeholder="请选择">
                      <el-option
                        v-for="item in poptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    </el-row>
                    <el-row>
                        <el-input placeholder="参数值"  v-model="dataManager.get_param[index].value"></el-input>
                    </el-row>
                    <el-row>
                        <el-button icon="el-icon-plus" @click="addParam('get',index)" type="primary" size="small"></el-button>
                        <el-button icon="el-icon-minus" @click="delParam('get',index)" type="danger" size="small"></el-button>
                    </el-row>
</div>
                </el-form-item>
                <el-form-item label="修改api">
                    <el-input filterable allow-create v-model="dataManager.upd_href" placeholder="upd_api"></el-input>
                </el-form-item>
                <el-form-item label="修改参数">
                    <el-row v-if="dataManager.upd_param.length==0">
                        <el-button icon="el-icon-plus" @click="addParam('upd',index)" type="primary" size="small"></el-button>
                        <el-button icon="el-icon-minus" @click="delParam('upd',index)" type="danger" size="small"></el-button>
                    </el-row>
                    <div v-else v-for="(item,index) in dataManager.upd_param" :key="index" style="margin-bottom: 10px">
                    <el-row>
                        <el-input placeholder="参数名" v-model="dataManager.upd_param[index].name"></el-input>
                    </el-row>
                    <el-row>
                    <el-select v-model="dataManager.upd_param[index].type" placeholder="请选择">
                      <el-option
                        v-for="item in poptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    </el-row>
                    <el-row>
                        <el-input placeholder="参数值"  v-model="dataManager.upd_param[index].value"></el-input>
                    </el-row>
                    <el-row>
                        <el-button icon="el-icon-plus" @click="addParam('upd',index)" type="primary" size="small"></el-button>
                        <el-button icon="el-icon-minus" @click="delParam('upd',index)" type="danger" size="small"></el-button>
                    </el-row>
</div>
                </el-form-item>
                <el-form-item label="删除api">
                    <el-input filterable allow-create v-model="dataManager.del_href" placeholder="del_api" ></el-input>
                </el-form-item>
                <el-form-item label="删除参数">
                    <el-row v-if="dataManager.del_param.length==0">
                        <el-button icon="el-icon-plus" @click="addParam('del',index)" type="primary" size="small"></el-button>
                        <el-button icon="el-icon-minus" @click="delParam('del',index)" type="danger" size="small"></el-button>
                    </el-row>
                    <div v-else v-for="(item,index) in dataManager.del_param" :key="index" style="margin-bottom: 10px">
                    <el-row>
                        <el-input placeholder="参数名" v-model="dataManager.del_param[index].name"></el-input>
                    </el-row>
                    <el-row>
                    <el-select v-model="dataManager.del_param[index].type" placeholder="请选择">
                      <el-option
                        v-for="item in poptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    </el-row>
                    <el-row>
                        <el-input placeholder="参数值"  v-model="dataManager.del_param[index].value"></el-input>
                    </el-row>
                    <el-row>
                        <el-button icon="el-icon-plus" @click="addParam('del',index)" type="primary" size="small"></el-button>
                        <el-button icon="el-icon-minus" @click="delParam('del',index)" type="danger" size="small"></el-button>
                    </el-row>
</div>
                </el-form-item>
                <el-form-item label="跳转地址">
                    <el-input filterable allow-create v-model="dataManager.add_href" placeholder="add_url" disabled></el-input>
                </el-form-item>
                <el-form-item label="跳转参数">
                    <el-row v-if="dataManager.add_param.length==0">
                        <el-button icon="el-icon-plus" @click="addParam('add',index)" type="primary" size="small"></el-button>
                        <el-button icon="el-icon-minus" @click="delParam('add',index)" type="danger" size="small"></el-button>
                    </el-row>
                    <div v-else v-for="(item,index) in dataManager.add_param" :key="index" style="margin-bottom: 10px">
                    <el-row>
                        <el-input placeholder="参数名" v-model="dataManager.add_param[index].name"></el-input>
                    </el-row>
                    <el-row>
                    <el-select v-model="dataManager.add_param[index].type" placeholder="请选择">
                      <el-option
                        v-for="item in poptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    </el-row>
                    <el-row>
                        <el-input placeholder="参数值"  v-model="dataManager.add_param[index].value"></el-input>
                    </el-row>
                    <el-row>
                        <el-button icon="el-icon-plus" @click="addParam('add',index)" type="primary" size="small"></el-button>
                        <el-button icon="el-icon-minus" @click="delParam('add',index)" type="danger" size="small"></el-button>
                    </el-row>
</div>
                </el-form-item>
                <el-form-item label="页面选择">
                  <el-tree :current-node-key="dataManager.cur_node" :default-expand-all="true" :data="all_page_list" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                </el-form-item>

              </el-form>
            </template>
          </el-col>
        </el-row>
      </div>
    </template>
  </div>
                  `
                },
                render: function (param) {
                  setTimeout(function () {
                    let focusNode = param.focusNode;
                    new Vue({
                      el: '#loginApp',
                      data: {
                        all_page_list:[], //所有页面
                        defaultProps:{
                          children: 'children',
                          label: 'name'
                        },
                        poptions:[
                          {
                          label: '等于',
                          value: '='
                        },
                          {
                            label: '小于',
                            value: '<'
                          },
                          {
                            label: '小于等于',
                            value: '<='
                          },
                          {
                            label: '大于',
                            value: '>'
                          },
                          {
                            label: '大于等于',
                            value: '>='
                          },
                          {
                            label: '不等于',
                            value: '!='
                          },
                          {
                            label: 'between数组',
                            value: 'between'
                          },
                          {
                            label: '包含like',
                            value: 'like'
                          },
                          {
                            label: '不包含',
                            value: 'dislike'
                          },
                          {
                            label: 'IN',
                            value: 'in'
                          },
                          {
                            label: 'NOT IN',
                            value: 'notin'
                          },
                          {
                            label: '右移',
                            value: 'toright'
                          },
                          {
                            label: '左移',
                            value: 'toleft'
                          },
                          {
                            label: '为空',
                            value: 'null'
                          },
                          {
                            label: '不为空',
                            value: 'notnull'
                          },
                        ],
                        dataManager: {
                          cur_node:"",
                          get_href:"",
                          add_href:"",
                          del_href:"",
                          upd_href:"",
                          staff_href:"",

                          get_param:[
                          //   {
                          //    name:"",
                          //    type:"=",
                          //    value:"",
                          // }
                          ],
                          del_param:[],
                          upd_param:[],
                          add_param:[],
                          staff_param:[],

                          add_url:"",
                          del_api:"",
                          upd_api:"",
                          get_api:"",
                          staff_api:"",
                        }
                      },
                      methods: {
                        getInitData(){
                          return {
                            cur_node:"",
                            get_href:"",
                            add_href:"",
                            del_href:"",
                            upd_href:"",
                            staff_href:"",

                            get_param:[
                              //   {
                              //    name:"",
                              //    type:"=",
                              //    value:"",
                              // }
                            ],
                            del_param:[],
                            upd_param:[],
                            add_param:[],
                            staff_param:[],

                            add_url:"",
                            del_api:"",
                            upd_api:"",
                            get_api:"",
                            staff_api:"",
                          }
                        },
                        addParam(pname){
                          if(pname=='get'){
                            this.dataManager.get_param.push({
                              name:"",
                              type:"=",
                              value:"",
                            })
                          }else if(pname=='del'){
                            this.dataManager.del_param.push({
                              name:"",
                              type:"=",
                              value:"",
                            })
                          }else if(pname=='upd'){
                            this.dataManager.upd_param.push({
                              name:"",
                              type:"=",
                              value:"",
                            })
                          }else if(pname=='add'){
                            this.dataManager.add_param.push({
                              name:"",
                              type:"=",
                              value:"",
                            })
                          }else if(pname=='staff'){
                            this.dataManager.staff_param.push({
                              name:"",
                              type:"=",
                              value:"",
                            })
                          }
                        },
                        delParam(pname,i){
                          if(pname=='get'){
                            this.dataManager.get_param.splice(i,1)
                          }else if(pname=='del'){
                            this.dataManager.del_param.splice(i,1)
                          }else if(pname=='upd'){
                            this.dataManager.upd_param.splice(i,1)
                          }else if(pname=='add'){
                            this.dataManager.add_param.splice(i,1)
                          }else if(pname=='staff'){
                            this.dataManager.staff_param.splice(i,1)
                          }

                        },
                        getProjectUuid(){
                          const searchParams = new URLSearchParams(window.location.search);

                          const projectUuid = searchParams.get('projectUuid'); // "John"
                          return projectUuid
                        },
                        getAllPage(){
                          this.$magicaltool.request.axios({
                            $vue:this,method:"get",contentType:"application/json",
                            url:'/magical_lowcode/user/page/project?projectUuid='+this.getProjectUuid(),
                            responseType:"",
                            data:{}
                          }).then((res)=> {
                            if (res.code !== 0) {
                              this.$message({
                                message: res.desc,
                                type: 'error',
                                showClose: true
                              })
                            }else{
                              this.all_page_list = [res.data]
                            }
                          })
                        },
                        handleNodeClick(data){
                          this.dataManager.add_href =this.$magicaltool.request.util.wrapCtxPath("magicalcoder/editor/publish.html")+'?pid='+this.getProjectUuid()+'&id='+data.uuid

                          this.dataManager.cur_node = data.$treeNodeId
                        },

                        /**保存当前状态**/
                        saveStatus() {

                          MAGICAL_CODER_API.changeAttr({
                            node: focusNode,
                            name: "datamanager",
                            value: JSON.stringify(this.dataManager)
                          }, false)
                          this.$message.success("保存成功")
                        },
                        /**保存当前状态**/
                        clearStatus() {
                          this.$confirm('此操作将删除该组件状态, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                          }).then(res=>{
                            MAGICAL_CODER_API.changeAttr({
                              node: focusNode,
                              name: "datamanager",
                              value: JSON.stringify(this.getInitData())
                            }, false)
                            this.$message.success("初始化成功")
                          })
                        },
                        importDataManager() {
                          if (MAGICAL_CODER_API.getFocusNode().attributes.datamanager) {
                            let renderInfo = JSON.parse(MAGICAL_CODER_API.getFocusNode().attributes.datamanager.replaceAll('&quot;', '"'))
                            console.log("重新载入的参数", renderInfo);
                            this.dataManager = renderInfo
                          }
                        }
                      },
                      mounted: function () {
                        this.getAllPage()
                        this.importDataManager()
                      }
                    })
                  }, 5)
                }
              }
            },
          ]
        }
      ]
    }
  ]
});
